<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/element.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="../js/vue.min.js"></script>
<script src="../js/element.js"></script>
<div class="layout">
  <h2>实例</h2>
  <h3>创建一个vue</h3>
  <p>每个vue都是通过Vue函数创建一个新的Vue实例开始。</p>
  <div class="context-box">
    <xmp>
        var vm = new Vue({
          // 选项
        })
    </xmp>
  </div>

  <h3>数据和方法</h3>
  <p>当一个vue创建时，它将data对象中所有的property加入到Vue的响应式系统中。当properties的值发生改变时，视图将会产生“响应”，视图重新渲染，更新值。</p>
  <div class="context-box">
    <xmp>
      // 我们的数据对象
      var data = { a: 1 }

      // 该对象被加入到一个 Vue 实例中
      var vm = new Vue({
        data: data
      })

      // 获得这个实例上的 property
      // 返回源数据中对应的字段
      vm.a == data.a // => true

      // 设置 property 也会影响到原始数据
      vm.a = 2
      data.a // => 2

      // ……反之亦然
      data.a = 3
      vm.a // => 3
    </xmp>
  </div>
  <p>freeze对象修改后，不会引发响应式。</p>

  <div class="context-box">
    <xmp>
      var obj = {
        foo: 'bar'
      }
      
      Object.freeze(obj)
      
      new Vue({
        el: '#app',
        data: obj
      })
    
      <div id="app">
        <p>{{ foo }}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button v-on:click="foo = 'baz'">Change it</button>
      </div>
    </xmp>
  </div>


  <h3>生命周期图示</h3>
  <p>下图展示了实例的生命周期。</p>
  <p>
    <img style="width: 80%;" src="../images/lifecycle.png" alt="Vue 实例生命周期">
  </p>
</div>
<script>
</script>

